<template>
<div class="save-wrapper ui pc ">
    <!--<header class="page-header-2">{{val.name}} (ID:{{val.id}})</header>-->
    <div class="ui ordered steps mini">
        <div class="step" :class="{active: activeTag.tab.id == id}" v-for="{id, text, options=null} in tabs">
            <div class="content">
                <div class="title">{{text}}
                    <select class="ui dropdown button" v-if="options">
                            <option class="item" :value="value" v-for="{value, text} in options">{{text}}</option>
                        </select>
                </div>
            </div>
        </div>
    </div>
    <div class="ui segment">
        <component :is='activeTag.components_name' @onchange="onchange" :params="params" :op='op'></component>
    </div>
    <div class="pc-actions">
        <step-action @sclick="sclick" ref="stepAction" :sconfig="sconfig"></step-action>
    </div>
</div>
</template>
<script>
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';

import stepAction from 'components/edit/addProduct/stepAction';

import warehouseEdit from 'components/edit/warehouse/warehouseEdit'
import proStockEdit from 'components/edit/warehouse/proStockEdit'


export default {
    data() {
        return {
            val: {},
            params: {
                type_id: "",
                data: {}
            },
            sconfig: {
                pre: {
                    disabled: true,
                },
                next: {
                    disabled: false
                },
                save: {
                    disabled: true
                },
                cancel: {}
            },
            comData: {},
            componentsList: {
                "1": "warehouseEdit",
                "2": "proStockEdit",
            },
            activeTag: {
                index: 0,
                tab: {},
                components_name: ""
            },
            tabStatus: {},
            tabs: [{
                    id: 1,
                    text: "选择仓库",
                },
                {
                    id: 2,
                    text: "售卖价格",
                }
            ]
        }
    },
    components: {
        stepAction,
        warehouseEdit,
        proStockEdit
    },
    watch: {
        "activeTag.index": function(val, oldval) {
            this.sconfig.pre.disabled = val == 0;
            this.sconfig.save.disabled = val != this.tabs.length - 1;
            this.sconfig.next.disabled = val == this.tabs.length - 1;
            this.activeTag.tab = this.tabs[val];
            this.activeTag.components_name = this.componentsList[this.activeTag.tab.id];
        }
    },
    methods: {
        /*设置步骤*/
        stepInit() {
            this.activeTag.index = 0;
            this.activeTag.tab = this.tabs[0];
            this.activeTag.components_name = this.componentsList[this.tabs[0].id];
            this.tabs.forEach((_, i) => {
                this.tabStatus[i + 1] = i < 10;
            });
        },
        /* component 数据回传 */
        onchange({
            name,
            data
        }) {
            this.params.data[name] = data;
        },
        /* 控制步骤 */
        sclick({
            type = ""
        }) {
            if (type == "cancel") {
                this.$router.go(-1);
                return;
            }
            let next = true;
            // Object.keys(data).forEach(key => {
            //     if (data[key].is_must && data[key].value.length < 1) {
            //         util.showMsg(this, 'error', `${data[key].label}是必填啊。`);
            //         next = false;
            //         return;
            //     }
            // })
            if (!next) {
                return;
            }
            if (type == "save") {
                this.onSubmit();
                return;
            }
            if (type == "pre") {
                this.activeTag.index--;
            }
            if (type == "next") {
                this.activeTag.index++;
            }
        },
        onSubmit() {},
    },
    computed: {
        titleType() {
            return logic.edit.get_titleType(this);
        },
        ctl() {
            return this.$route.query.ctl;
        },
        op() {
            return util.getOp(this)
        },
        editData() {
            return this.$store.state.global.editVo;
        }
    },
    props: [],
    created() {
        this.$nextTick(() => {
            this.stepInit();
        });

        // this.$refs.step.
    },
}
</script>
<style rel="stylesheet/less" scoped lang="less">
@import "../../common/style/mixin";

.page-header-2 {
    font-size: 16px;
    padding: 10px;
    border-bottom: 1px solid rgba(34, 36, 38, .15);
}

.pc {
    padding-bottom: 60px;
    &-actions {
        position: fixed;
        left: 210px;
        right: 20px;
        bottom: 10px;
        padding-top: 10px;
        background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }
    &-block {
        &-title {
            font-size: 14px;
            height: 26px;
            line-height: 26px;
            margin-bottom: 10px;
        }
    }
}
</style>
